<template>
  <div>
    <div class="top-header">
      <div class="menu" @click="showMenu = true"><img src="../../../../assets/img/icon-menu.png" alt="" width="100%"></div>
      <div class="time">{{ time }}</div>
    </div>
    <calendar :editor="true" @getCourse="getCourse" @toAddCourse="toAddCourse"/>
    <van-popup
      v-model="showMenu"
      position="left"
      :style="{ width: '70%', height: '100%' }">
      <menu-list :menus="menus"/>
    </van-popup>
    <van-dialog
      v-model="showCourse"
      :show-confirm-button="false">
      <van-field v-model="course.name" label="课程名称"/>
      <van-field v-model="course.student" label="学生姓名"/>
      <van-field v-model="course.time" label="上课时间"/>
      <van-field v-model="course.address" label="上课地点"/>
      <div class="bottom-btns">
        <div class="bottom-btn">
          <button>排课</button>
        </div>
        <div class="bottom-btn">
          <button>评价</button>
        </div>
        <div class="bottom-btn">
          <button>签到</button>
        </div>
        <div class="bottom-btn">
          <button>临时调课</button>
        </div>
      </div>
      <div class="close" slot="title" @click="showCourse = false">X</div>
    </van-dialog>
  </div>
</template>

<script>
import menuList from '@/components/menu'
import calendar from '@/components/calendar'
export default {
  name: 'index',
  data () {
    return {
      time: '',
      showMenu: false,
      menus: [
        {path: '/studentList', icon: require('@/assets/img/icon-menu-student.png'), title: '我的学生'},
        {path: '/myCourse', icon: require('@/assets/img/icon-menu-course.png'), title: '我的课程'},
        {path: '/leaveList', icon: require('@/assets/img/icon-menu-leave.png'), title: '审批请假'},
        {path: '/checkRecord', icon: require('@/assets/img/icon-menu-check.png'), title: '签到记录'},
        {path: '/message', icon: require('@/assets/img/icon-menu-message.png'), title: '消息管理'},
        {path: '/editPoster', icon: require('@/assets/img/icon-menu-share.png'), title: '分享海报'}
      ],
      showCourse: false,
      course: {
        name: '古筝课',
        student: '张三',
        time: '周一，9:00-10:00',
        address: '广州市天河区体育西路'
      }
    }
  },
  methods: {
    getCourse (course) {
      console.log(course)
      // this.$router.push('/courseDetail')
      this.showCourse = true
    },
    toAddCourse () {
      this.$router.push('/editCourse')
    }
  },
  components: {
    menuList,
    calendar
  },
  created () {
    const date = new Date()
    this.time = `${date.getFullYear()}年${date.getMonth() + 1}月`
  }
}
</script>

<style scoped>
  .top-header{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
  }
  .top-header .menu{
    width: 20px;
    margin: 0 10px;
    display: flex;
    align-items: center;
  }
  .top-header .time{
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 30px;
    color: rgba(30,30,30,1);
  }
</style>
